<template>
    <!--<scroller class="scroller" @loadmore="getmore" loadmoreoffset="30">-->
    <scroller class="scroller" >

        <!--<header><text class="header">标题</text></header>-->
        <div class="cell" v-for="i in lists">
            <div class="panel">
                <!--   每个小项都有自己的图片 ,class叫image2   -->
                <image class="image" :src="i.url"></image>
                <text @click="jump('c')" class="text">{{i.name}}</text>
            </div>
        </div>

        <!--上拉刷新 -->
        <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
            <text class="indicator-text">刷新中...</text>
            <loading-indicator class="indicator"></loading-indicator>
        </refresh>

        <!--下拉加载-->
        <loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
            <text class="indicator-text">加载中...</text>
            <loading-indicator class="indicator"></loading-indicator>
        </loading>

    </scroller>
</template>

<script>
  const RECOMMEND = new BroadcastChannel('wyz')
  var navigator = weex.requireModule('navigator')
  const modal = weex.requireModule('modal')
  const itemPerOp = 2
  const maxLength = 10
  export default {
    data () {
      return {
        refreshing: false,
        loadinging: false,
        more: false,
        lists: [
          {
            'name':'c',
            'url':'https://gitee.com/earth_wyz/pic/raw/master/c.png'
          },
          {
            'name':'c++',
            'url':'https://gitee.com/earth_wyz/pic/raw/master/c++.png'
          },
          {
            'name':'java',
            'url':'https://gitee.com/earth_wyz/pic/raw/master/java.png'
          },
          {
            'name':'python',
            'url':'https://gitee.com/earth_wyz/pic/raw/master/python.png'
          },
          {
            'name':'php',
            'url':'https://gitee.com/earth_wyz/pic/raw/master/php.png'
          },
        ],

        imageList: [
          { src: 'https://pic1.zhimg.com/50/v2-52b0507faf6bf0c681d05195c0f1bd96_hd.jpg'},
          { src: 'https://pic4.zhimg.com/50/v2-789a26894dabbd9dd6b9724d32f368cd_hd.jpg'}
        ]
      }
    },
    methods: {
      jump : function (e) {
        RECOMMEND.postMessage('recommend')
        this.$router.push(e);
      },



      getmore(event){
        this._data.more = true;
      },

      onloading (event) {
        modal.toast({ message: '加载中...', duration: 1 })
        this.loadinging = true
        setTimeout(() => {
          const length = this.lists.length;
          for(let i = length; i < length+itemPerOp&&i < maxLength;i++){
            this.lists.push({'name':i.toString(),'url':'https://pic1.zhimg.com/50/v2-52b0507faf6bf0c681d05195c0f1bd96_hd.jpg'});
          }
          this.loadinging = false
        }, 1000)
      },
      onrefresh (event) {
        modal.toast({ message: '刷新中...', duration: 1 })
        this.refreshing = true
        setTimeout(() => {
          this.refreshing = false
        }, 1000)
      },
      onpullingdown (event) {
        console.log("dy: " + event.dy)
        console.log("pullingDistance: " + event.pullingDistance)
        console.log("viewHeight: " + event.viewHeight)
        console.log("type: " + event.type)
      }

    }
  }
</script>

<style scoped>
    .loading {
        width: 750;
        display: -ms-flex;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;
    }
    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }
    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
    .cell{
        /*width: 600px;*/
        height: 450px;
    }
    .panel {
        width: 600px;
        height: 300px;
        margin-left: 75px;
        margin-top: 35px;
        margin-bottom: 35px;
        flex-direction: column;
        justify-content: center;
        border-width: 2px;
        border-style: solid;
        border-color: #DDDDDD;
        background-color: #F5F5F5;
        /*background-color: red;*/
    }
    .text {
        font-size: 50px;
        text-align: center;
        color: #41B883;
    }
    .header {
        font-size: 70px;
        text-align: center;
        color: #41B883;
    }

    /*这里是weex官网对于slider的描述*/
    .image {
        width: 600px;
        height: 250px;
    }
    .slider {
        /*margin-top: 75px;*/
        margin-left: 75px;
        width: 600px;
        height: 500px;
        /*border-width: 2px;*/
        /*border-style: solid;*/
        /*border-color: #41B883;*/
    }
    .frame {
        width: 700px;
        height: 700px;
        position: relative;
    }

    .indicator2 {
        width:600px;
        height:30px;
        position:absolute;
        bottom: 10px;
        left:1px;
        right:1px;
        item-color: white;
        item-selected-color: blue;
        item-size: 20px;
    }
</style>
